<template>
  <div class="policy-page">
    <div class="title">关联政策</div>
    <!-- <policyAtlas v-if="policyData" :data="policyData" /> -->
    <vueTree v-if="policyData" :data="policyData" :seachType="'2'"/>
  </div>
</template>

<script setup lang="ts">
import { ref, onActivated, watch } from "vue";
import { useRoute, onBeforeRouteUpdate, onBeforeRouteLeave } from "vue-router";
import policyAtlas from "../../components/policyAtlas/index.vue";
import vueTree from "../../components/vueTree/index.vue";

import { matchingPolicyByID } from "../../service/matching";

const route = useRoute();
const id = ref<any>();

const policyData = ref<any>(null);

watch(
  () => route.query.id,
  (newVal, oldVal) => {
    policyData.value = null;
    if (typeof newVal === "string") {
      matchingPolicyByID(newVal).then((res) => {
        policyData.value = {
          id: "0",
          label: "政策图谱",
          children: [...res.data]
        };
      });
    }
  },
  { immediate: true }
);

// onActivated(() => {
//   policyData.value = null;
//   matchingPolicyByID(id).then((res) => {
//     policyData.value = { id: "0", label: "政策图谱", children: [...res.data] };
//   });
// });
</script>

<style scoped lang="postcss">
.policy-page {
  .title {
    @apply font-bold text-center my-4;
    font-size: 30px;
  }
}
</style>
